<template>
  <div class="content">
    <div class="header">
      <el-row type="flex">
        <el-row type="flex">
          <el-input
            v-model="queryList.keyword"
            clearable
            size="small"
            placeholder="手机号/姓名/机构名称/职位"
          />
          <el-button class="searchBtn" size="small" type="primary" @click="getList()">搜索</el-button>
        </el-row>
      </el-row>
    </div>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :element-loading-text="g.loadingStr"
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column label="序号" align="center" width="100" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构LOGO" align="center">
        <template slot-scope="{row}">
          <img class="teacherHead" :src="row.businessLogo" alt>
        </template>
      </el-table-column>
      <el-table-column label="机构名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.businessName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构联系电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.senderPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="招聘职位" align="center">
        <template slot-scope="{row}">
          <span @click="checkPositionInfo(row)">{{ row.positionInfoName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="老师头像" align="center">
        <template slot-scope="{row}">
          <img class="teacherHead" :src="row.receiverAvatar" alt>
        </template>
      </el-table-column>
      <el-table-column label="老师姓名" align="center">
        <template slot-scope="{row}">
          <span v-if="row.receiverName==null||row.receiverName==''" @click="checkTeacherInfo(row)">-</span>
          <span @click="checkTeacherInfo(row)">{{ row.receiverName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="老师联系电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.receiverPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <span v-if="row.status===2">已发送</span>
          <span v-if="row.status==3">已查看</span>
          <span
            v-if="row.status==2"
          >处理时间{{ row.processingTime | parseTime('{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          <el-button v-if="row.status===1" type="primary" plain @click="sendToTeacher(row)">发送给老师</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="机构招聘" :visible.sync="orgRecruitmentDialog" width="60%" center>
      <div class="mainBox">
        <div class="main-left">
          <div class="basicInfo">
            <div class="basic-left">
              <img class="basicImg" :src="posiTionList.businessLogo" alt>
            </div>
            <div class="basic-right">
              <p class="sameFont">
                {{ posiTionList.businessName }}
                <span>(id{{ posiTionList.id }})</span>
              </p>
              <p>
                入驻时间:
                <span>{{ posiTionList.checkInTime | parseTime('{y}-{m}-{d}') }}</span>
              </p>
              <p>
                教职员工:
                <span>{{ posiTionList.teacherNum==''?'暂未填写':posiTionList.teacherNum }}</span>
              </p>
              <p>
                学生人数:
                <span>{{ posiTionList.studentNum==null?'暂未填写':posiTionList.studentNum }}</span>
              </p>
              <p>
                联系电话:
                <span>{{ posiTionList.businessPhone==null?'暂未填写':posiTionList.businessPhone }}</span>
              </p>
            </div>
          </div>
          <div class="intention">
            <p class="sameFont">
              招聘要求
              <span
                style="color:#606266;font-size:14px"
              >(发布时间:{{ posiTionList.createTime | parseTime('{y}-{m}-{d} {h}:{m}') }})</span>
            </p>
            <ul>
              <li>
                招聘职位：
                <span>{{ posiTionList.name }}</span>
              </li>
              <li>
                薪资待遇：
                <span
                  v-if="posiTionList.salaryMin == null && posiTionList.salaryMax==null"
                >暂未填写</span>
                <span v-if="posiTionList.salaryMin==0 && posiTionList.salaryMax==0">面议</span>
                <span v-else>{{ posiTionList.salaryMin }}-{{ posiTionList.salaryMax }}/月</span>
              </li>
              <li>
                工作性质：
                <span>{{ posiTionList.positionNature===1?'全职':'兼职' }}</span>
              </li>
              <li>
                职位层级：
                <span>{{ posiTionList.hierarchyName }} {{ posiTionList.teacherModeName }}</span>
              </li>
              <li>
                最低学历：
                <span>{{ posiTionList.minimumEducationName }}</span>
              </li>
              <li>
                招聘人数：
                <span>{{ posiTionList.recruitPeopleNum }}人</span>
              </li>
              <li>
                到岗时间：
                <span>{{ posiTionList.startDate==null?'暂未填写':posiTionList.startDate }}</span>
              </li>
              <li>
                工作地址：
                <span>{{ posiTionList.workAddressProvince }}{{ posiTionList.workAddressCity }}{{ posiTionList.workAddressRegion }}{{ posiTionList.workAddressTown }}</span>
              </li>
              <li>
                期望福利：
                <span>{{ posiTionList.fringeBenefits==null?'暂未填写':posiTionList.fringeBenefits }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="main-right">
          <div class="education">
            <p class="sameFont">职位描述</p>
            <div class="educationexperience">
              <p v-html="posiTionList.positionDetail">{{ posiTionList.positionDetail }}</p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orgRecruitmentDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryList.currentPage"
      :limit.sync="queryList.pageSize"
      @pagination="getList"
    />
    <resumeInfoDetail
      ref="$resume"
      :is-show-dialog="teacherResumeInfoDialog"
      :user-id="userId"
      @closeDialog="closeRusemeDetail"
    />
  </div>
</template>

<script>
import * as invite from '@/api/recruitment'
import Pagination from '@/components/Pagination'
import resumeInfoDetail from '@/components/resumeInfo/resumeInfo'

export default {
  name: 'PowerList',
  components: { Pagination, resumeInfoDetail },
  data() {
    return {
      queryList: {
        keyword: '',
        type: 1,
        currentPage: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      teacherDialog: false,
      orgRecruitmentDialog: false,
      posiTionList: {
        businessName: '',
        id: '',
        name: '',
        salaryMin: '',
        salaryMax: '',
        positionNature: '',
        teacherModeName: '',
        minimumEducationName: '',
        recruitPeopleNum: '',
        startDate: '',
        workAddressProvince: '',
        workAddressCity: '',
        workAddressRegion: '',
        fringeBenefitsIds: ''
      },
      accountProfile: {},
      experiences: [],
      works: [],
      jobIntention: {},
      age: '',
      joinTime: '',
      proviceStr: '',
      teacherResumeInfoDialog: false,
      userId: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 查询列表
    getList() {
      invite.getDeliverAndInviteList(this.queryList).then((res) => {
        // console.log(res)
        this.list = res.data.records
        this.total = res.data.total
      })
    },
    closeRusemeDetail(val) {
      this.teacherResumeInfoDialog = val
    },
    // 查看老师简历
    checkTeacherInfo(row) {
      this.teacherResumeInfoDialog = true
      this.$refs.$resume.check_Teacher_Resume_Detail(row.receiverId)
    },
    // 发送给老师
    sendToTeacher(row) {
      console.log(row)
      this.$confirm(
        `确定把${row.businessName}的${row.positionInfoName}招聘发送给${row.receiverName}吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          invite
            .sendStatus({
              id: row.id,
              status: 2,
              processingTime: new Date().getTime()
            })
            .then((res) => {
              if (res.code === '200') {
                this.$message({
                  type: 'success',
                  message: '发送成功!'
                })
                this.getList()
              }
            })
        })
        .catch(() => {})
    },
    // 查询职位
    checkPositionInfo(row) {
      this.orgRecruitmentDialog = true
      invite.getPosition({ id: row.positionInfoId }).then((res) => {
        if (res.code === '200') {
          this.posiTionList = res.data
          console.log(this.posiTionList)
          if (this.posiTionList.positionDetail !== '' || this.positionDetail !== null) {
            this.posiTionList.positionDetail = this.posiTionList.positionDetail.replace(/\n/g, '<br \/>')
          }
        }
      })
    },
    // 计算年龄
    getAge(birthday) {
      // 出生时间 毫秒
      const birthDayTime = new Date(birthday).getTime() / 100
      // 当前时间 毫秒
      const nowTime = new Date().getTime()
      // 一年毫秒数(365 * 86400000 = 31536000000)
      return Math.ceil((nowTime - birthDayTime) / 31536000000)
    },
    computedAgeOrWorkTime(timeer, boolean = true) {
      const nowTime = new Date().getTime() + ''
      // 一年毫秒数(365 * 86400000 = 31536000000)
      const subTime = nowTime.substring(0, nowTime.length - 3)
      if (boolean) {
        return Math.floor(((+subTime - timeer) / 31536000000) * 1000) + '岁'
      } else {
        return Math.ceil(((+subTime - timeer) / 31536000000) * 1000)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.content {
  padding: 10px;
  .header {
    margin-bottom: 15px;
    .searchBtn {
      margin-left: 15px;
    }
    .addTeachBtn {
      margin-left: 30px;
    }
    /deep/ .el-input__inner {
      width: 250px;
    }
  }
  .teacherHead {
    width: 50px;
  }
  .mainBox {
    display: flex;
    width: 100%;
    height: 550px;

    .main-left {
      flex: 1;
      border-right: 2px solid #1890ff;
      p {
        margin: 10px 0;
      }
      .basicInfo {
        width: 100%;
        display: flex;
        margin-bottom: 50px;
        .basic-left {
          width: 150px;
          margin-right: 15px;
          img {
            width: 100%;
          }
        }
      }
      .intention {
        ul {
          margin: 0;
          padding: 0;
          li {
            list-style: none;
            margin: 15px 0;
          }
        }
      }
    }
    .main-right {
      flex: 1;
      margin-left: 20px;
      overflow: auto;
      p {
        margin: 5px 0;
      }
      .education,
      .work {
        .educationexperience {
          margin: 30px 0;
          p {
            margin-bottom: 10px;
          }
        }
      }
    }
    .sameFont {
      font-size: 20px;
      font-weight: 700;
      color: #169bd5;
    }
    .exepress {
      font-size: 16px;
      font-weight: 700;
      &::brfore {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        background-color: #1890ff;
      }
    }
  }
}
</style>

